<template>
  <div>
    <div class="backbtn" @click="backDemos()">返回</div>
    <div class="change">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>选择影像</span>

        </div>
        <div class=" item">
          <el-select v-model="currentselect" @change="changeLayer">
            <el-option v-for="(item, index) in basemapOptions" :label="item.label" :value="item.id"></el-option>
          </el-select>

        </div>
      </el-card>
    </div>


    <div id="earth" class="earth"></div>
  </div>
</template>
<script>
import * as Cesium from 'cesium/Cesium';
import BaserLayer from './imageProviderViewModel/ImageProviderViewModels.js'



export default {
  name: 'HelloWorld',
  data() {
    return {
      viewer: null,
      defaultRectangle: null,
      baselayers: null,
      currentselect: "",
      layers: [],
      basemapOptions: []
    };
  },
  mounted() {
    this.initEarth();
    // this.updateLayers();
    this.initBaseMap();
  },
  methods: {
    initEarth() {
      this.baselayers = new BaserLayer()
      Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkZjA1ZjdiMi1jOTU0LTQxNGMtYWVlMi1mZjQ5YjNlYWZjOGIiLCJpZCI6MTAxOTksInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NTU5MjYwOTd9.RQGIE__x7NQ7eSepPr0I4F20Nw72dGDkyCaPo9nRXRI'
      this.viewer = new Cesium.Viewer('earth', {
        animation: false, // 是否显示动画控件
        baseLayerPicker: false, // 是否显示图层选择控件
        homeButton: false, // homebutton
        geocoder: false, // 是否显示地名查找控件
        timeline: false, // 是否显示时间线控件
        sceneModePicker: false, // 是否显示投影方式控件
        navigationHelpButton: false, // 是否显示帮助信息控件
        infoBox: false, // 是否显示点击要素之后显示的信息
        skyAtmosphere: false,//大气层
        shadows: true,
        terrainProvider: Cesium.createWorldTerrain(),

      });
      // 夸张地形
      this.viewer.scene.globe.terrainExaggeration = 8.0;
      this.viewer.imageryLayers.addImageryProvider(this.baselayers.NATURALEARTHIMAGE())
      // 设置logo不可见
      this.viewer._cesiumWidget._creditContainer.style.display = 'none';
      this.defaultRectangle = Cesium.Rectangle.fromDegrees(
        75.0, // 东
        0.0, // 南
        140.0, // 西
        60.0, // 北
      );
      Cesium.Camera.DEFAULT_VIEW_RECTANGLE = this.defaultRectangle


    },

    backDemos() {
      this.$router.push({ name: 'index' })
    },
    updateLayers() {
      this.layers = [];
      this.layers.push({ id: 0, label: "默认底图", value: this.baselayers.NATURALEARTHIMAGE() });
      this.layers.push({ id: 1, label: "天地图影像图", value: this.baselayers.TDTIMAGE() });
      this.layers.push({ id: 3, label: "天地图矢量图", value: this.baselayers.TDTVECTOR() });
      this.layers.push({ id: 4, label: "高德地图", value: this.baselayers.GDIMAGE() });
      this.layers.push({ id: 5, label: "Bing地图", value: this.baselayers.BINGIMAGE() });
      this.layers.push({ id: 6, label: "Bing矢量图", value: this.baselayers.BINGVECTOR() });
      this.layers.push({ id: 7, label: "Bing路径图", value: this.baselayers.BINGROUTER() });

      this.layers.push({ id: 12, label: "ESRI影像图", value: this.baselayers.ESRIIMAGE() });
      this.layers.push({ id: 13, label: "ESRI街道图", value: this.baselayers.ESRISTREETS() });
      this.layers.push({ id: 14, label: "ESRI自然图", value: this.baselayers.ESRINATURAL() });
      this.layers.push({ id: 15, label: "OSM矢量图", value: this.baselayers.OSMVECTOR() });
      this.layers.push({ id: 16, label: "OSM彩色地图", value: this.baselayers.OSMVECTORCOLOR() });
      this.layers.push({ id: 17, label: "OSM地图", value: this.baselayers.OSMTONER() });
      // this.layers.push({ id: 18, label: "ION3954", value: this.baselayers.IONIMAGESENTINEL() });
      // this.layers.push({ id: 18, label: "ION3845", value: this.baselayers.IONBLURMARNLE() });
      // this.layers.push({ id: 18, label: "ION3812", value: this.baselayers.IONNIGHT() });
      // this.layers.push({ id: 9, label: "MapBox影像", value: this.baselayers.MAPBOXIMAGE() });
      // this.layers.push({ id: 10, label: "MapBox街道图", value: this.baselayers.MAPBOXSTREETS() });
      // this.layers.push({ id: 11, label: "MapBox街区图", value: this.baselayers.MAPBOXSTREETSIMAGR() });

    },
    changeLayer(id) {
      // let layerpickers = this.viewer.imageryLayers;
      // console.log(id, layerpickers)
      // layerpickers.removeAll();
      // let layer = this.layers[id];
      // let ilayer = new Cesium.ImageryLayer(layer)
      // console.log(111111, ilayer)
      // let ilayers = [];
      // ilayers.push(ilayer)
      // layerpickers.add(ilayers[0])
      // layerpickers.lowerToBottom(ilayers[0])
      const f =this.viewer.imageryLayers._layers.filter(item=>{
        return item.lyr_id;
    })
    if(f.length == 0){
       this. viewer.imageryLayers.remove(this.viewer.imageryLayers.get(0))
        const l = this.getLayer(this.getLayerOption('TDTSL'));//默认加载天地图矢量
        l.forEach(itme =>{
            this.viewer.imageryLayers.add(itme);
            this.viewer.imageryLayers.lowerToBottom(itme);
        })
    }else{
        for (const elem of f) {
            this.viewer.imageryLayers.remove(elem);
        }
        const l = this.getLayer(this.getLayerOption('TDTYX'));//默认加载天地图矢量
        l.forEach(itme =>{
            this.viewer.imageryLayers.add(itme);
           this. viewer.imageryLayers.lowerToBottom(itme);
        })
    }

    },
    initBaseMap() {
      this.basemapOptions = [
        /**
    * type代表地图服务类型
    * 0 代表ArcGisMapServerImageryProvider;
    * 1 代表createOpenStreetMapImageryProvider;
    * 2 代表WebMapTileServiceImageryProvider;
    * 3 代表createTileMapServiceImageryProvider;
    * 4 代表UrlTemplateImageryProvider;
    * 5 代表WebMapServiceImageryProviderr);
    */
        {
          id: 'TDTSL',
          img: '',//缩略图
          type: 2,
          label: '天地图矢量',
          params: [
            {
              url:  'http://t0.tianditu.com/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=f4d0553a23372a2f48c74851c7e46f4d',
              layer: 'veccva',
              style: 'default',
              format: 'tiles',
              tileMatrixSetID: 'w',
              subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
              credit: new Cesium.Credit('天地图矢量注记'),
              maximumLevel: 18
            },
            {
              url:  'http://t0.tianditu.com/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=f4d0553a23372a2f48c74851c7e46f4d',
              layer: 'vec',
              style: 'default',
              format: 'tiles',
              tileMatrixSetID: 'w',
              subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
              credit: new Cesium.Credit('天地图矢量'),
              maximumLevel: 18
            },

          ]
        },
        {
          id: 'TDTYX',
          img: '',//缩略图
          type: 2,
          label: '天地图影像',
          params: [
            {
              url: 'http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=f4d0553a23372a2f48c74851c7e46f4d' ,
              layer: 'imgcia',
              style: 'default',
              format: 'tiles',
              tileMatrixSetID: 'w',
              subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
              credit: new Cesium.Credit('天地图影像注记'),
              maximumLevel: 18
            },
            {
              url:'http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=f4d0553a23372a2f48c74851c7e46f4d',
              layer: 'img',
              style: 'default',
              format: 'tiles',
              tileMatrixSetID: 'w',
              subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
              credit: new Cesium.Credit('天地图影像'),
              maximumLevel: 18
            },
          ]
        }
      ]
    },
    getLayerOption(val) {
      return this.basemapOptions.find(item => {
        return item.id == val;
      })
    },
    getLayer (val){
    let tempLayerList=[];
    switch (val.type){
        case 0:{
            break;
        }
        case 1:{
            break;
        }
        case 2:{
            val.params.forEach(item =>{
                let l  =new Cesium.ImageryLayer(
                    new Cesium.WebMapTileServiceImageryProvider(item)
                )
                l.lyr_id = 'basemapLayer';
                l.lyr_name = val.id;
                tempLayerList.push(
                    l
                )
            })
            break;
        }
    }
    return tempLayerList;
}

  },

};
</script>
<style scoped>
.earth {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.backbtn {
  position: absolute;
  left: 20px;
  top: 20px;
  width: 40px;
  height: 30px;
  background-color: #409EFF;
  z-index: 10;
  text-align: center;
  line-height: 30px;
  color: #fff;
  cursor: pointer;

}

.change {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 200px;
  z-index: 10;
}
</style>